<!-- View -->
<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-form :inline="true" :model="searchMap" class="demo-form-inline">
          <el-form-item label="活动名称">
            <el-input v-model="searchMap.name" placeholder="填入活动名称进行查询"></el-input>
          </el-form-item>
          <el-form-item label="活动日期">
            <el-date-picker v-model="searchMap.starttime" value-format="yyyy-MM-dd" type="date" placeholder="选择开始日期"></el-date-picker>
            <el-date-picker v-model="searchMap.endtime" value-format="yyyy-MM-dd" type="date" placeholder="选择结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getList">搜索</el-button>
            <!-- 弹窗、表单对象清空、更新标记清空 -->
            <el-button icon="el-icon-plus" type="success" @click="dialogVisible=true;pojo={};id=''">新增</el-button>
          </el-form-item>
        </el-form>
        <!-- 活动列表 -->
        <el-table :data="list" border style="width: 100%">
            <el-table-column prop="id" label="活动ID" width="180"></el-table-column>
            <el-table-column prop="name" label="活动名称" ></el-table-column>
            <el-table-column prop="sponsor" label="主办方" width="180"></el-table-column>
            <el-table-column prop="address" label="活动地址"></el-table-column>
            <el-table-column prop="starttime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="endtime" label="结束时间" width="180"></el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <!-- scope.row代表的是整行数据，一个对象 -->
                <el-button @click="findById(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <br>
        <!-- 分页组件 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[12, 20, 30, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <!-- 弹窗代码 -->
        <el-dialog  title="活动编辑" :visible.sync="dialogVisible" top="30px">
          <el-form label-width="80px">
            <el-form-item label="活动名称">
                <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
            </el-form-item>
            <el-form-item label="基本地址">
                <el-input v-model="pojo.address"  placeholder="基本地址"></el-input>
            </el-form-item>
            <el-form-item label="开始日期">
                <el-date-picker type="date"  v-model="pojo.starttime" placeholder="开始日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="截至日期">
                <el-date-picker type="date" v-model="pojo.endtime"  placeholder="截至日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="报名截止">
                <el-date-picker type="date" v-model="pojo.enrolltime"  placeholder="报名截止"></el-date-picker>
            </el-form-item>
            <el-form-item label="活动详情">
                <el-input v-model="pojo.detail" placeholder="活动详情" type="textarea"  :rows="2"></el-input>
            </el-form-item>
            <el-form-item label="城市">
                <el-select v-model="pojo.city" filterable placeholder="请选择">
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否可见">
                <el-switch active-value="1" inactive-value="0" v-model="pojo.state"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSave">保存</el-button>
                <el-button @click="dialogVisible = false" >关闭</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
    </div>
</template>


<!-- ViewModel -->
<script>
// 导入Api  :  @ 代表src目录
import gatheringApi from '@/api/gathering'
import cityApi from '@/api/city'

export default {
  data() {
    return {
      list: [], // 给view迭代的对象集合
      pageNo: 1, // 当前页
      pageSize: 12, // 页大小
      searchMap: {}, // 查询条件
      total: 0, // 总记录数
      dialogVisible: false, // 弹窗标记，默认关闭弹窗
      pojo: {}, // 新增活动表单对象
      cityList: [], // 城市列表
      id: '' // 保存或者更新的标记
    }
  },
  // 生命周期钩子可以自动触发
  created() {
    // 调用获取列表的方法
    this.getList()
    // 给城市列表赋值
    cityApi.cityList().then(res => {
      // 给城市列表赋值
      this.cityList = res.data
    })
  },
  methods: {
    getList() {
      // 调用后台的api的代码
      gatheringApi.search(this.pageNo, this.pageSize, this.searchMap).then(res => {
        console.log('获取分页数据')
        console.log(res.data.rows)
        // 给list赋值
        this.list = res.data.rows
        // 给总记录数赋值
        this.total = res.data.total
      })
    },
    // 页大小改变触发的方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      // 给页大小赋值
      this.pageSize = val
      // 调用分页查询
      this.getList()
    },
    // 当前页改变之后触发的方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      // 给当前页赋值
      this.pageNo = val
      // 调用分页查询
      this.getList()
    },
    handleSave() {
      // 有两个功能： 一个保存一个是更新：类似SpringDataJpa中的save方法
      if (this.id === '') {
        gatheringApi.save(this.pojo).then(res => {
          this.$message({
            message: res.message,
            type: (res.flag ? 'success' : 'error')
          })
          // 刷新列表
          if (res.flag) {
            this.getList()
            // 关闭弹窗
            this.dialogVisible = false
          }
        })
      } else {
        // 更新
        gatheringApi.update(this.id, this.pojo).then(res => {
          this.$message({
            message: res.message,
            type: (res.flag ? 'success' : 'error')
          })
          // 刷新列表
          if (res.flag) {
            this.getList()
            // 关闭弹窗
            this.dialogVisible = false
          }
        })
      }
    },
    findById(obj) {
      // alert(JSON.stringify(obj, '', 2))
      // 第一种回显，这种回显适合操作人比较少的场景
      // 给pojo赋值
      // this.pojo = obj
      // 弹窗
      // this.dialogVisible = true

      // 第二种回显：实时通过id去查询活动详情，再回显
      gatheringApi.findById(obj.id).then(res => {
        if (res.flag) {
          // 给pojo赋值
          this.pojo = res.data
          // 弹窗
          this.dialogVisible = true
          // 成功之后，给更新标记赋值
          this.id = obj.id
        } else {
          // 查询不成功提醒用户
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    deleteById(id) {
      // 询问用户是否删除
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定删除
        gatheringApi.delete(id).then(res => {
          this.$message({
            message: res.message,
            type: (res.flag ? 'success' : 'error')
          })
          // 如果删除成功
          if (res.flag) {
            this.getList() // 刷新列表
          }
        })
      })
    }
  }
}
</script>

